{"version":3,"file":"static/chunks/pages/share/story/[storyUid]-e510332db14a4ca4.js","mappings":"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","sources":["webpack://_N_E/./src/components/share/ShareHeader.tsx","webpack://_N_E/./src/components/share/ShareLayout.tsx","webpack://_N_E/./src/components/storyDetail/summary/StoryDescription.tsx","webpack://_N_E/./src/components/share/ShareContent.tsx","webpack://_N_E/./src/components/share/story/StorySummary.tsx","webpack://_N_E/./src/pages/share/story/[storyUid].tsx","webpack://_N_E/?1176"],"sourcesContent":["import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport Link from 'next/link';\nimport { useRouter } from 'next/router';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport { LogotypeMainIcon } from 'public/assets';\nimport { openOldDeepLink } from '@common/utils';\n\nimport { OLD_DEEP_LINK } from '@common/values';\n\nconst ShareHeader = () => {\n  const { t } = useTranslation();\n  const router = useRouter();\n\n  const onClickApp = () => {\n    openOldDeepLink({ t, router, deepLink: OLD_DEEP_LINK });\n  };\n\n  return (\n    <>\n      <nav css={container}>\n        <Link href=\"/\">\n          <div className=\"logo\">\n            <LogotypeMainIcon className=\"logo\" width={132.3} height={36} />\n          </div>\n        </Link>\n\n        <button className=\"button\" onClick={onClickApp}>\n          {t('share_screen_button_move_to_app')}\n        </button>\n      </nav>\n    </>\n  );\n};\n\nconst container = css`\n  position: fixed;\n  top: 0;\n  display: flex;\n  justify-content: space-between;\n  min-height: 4.5em;\n  background: ${theme.colors.white};\n  width: 800px;\n  align-items: center;\n  padding: 0 1em;\n  z-index: 2;\n\n  @media screen and (max-width: ${theme.devices.mobile}) {\n    width: 100%;\n  }\n\n  .button {\n    height: 2.25em;\n    cursor: pointer;\n    padding: 0.5em 0.9em;\n    font: ${theme.font.body1Normal};\n    background: ${theme.colors.white};\n    color: ${theme.colors.primary500};\n    border: 0.0625em solid ${theme.colors.primary500};\n    border-radius: 0.375em;\n  }\n\n  .logo {\n    cursor: pointer;\n    width: 9.1875em;\n    height: 3.125em;\n\n    @media (max-width: ${theme.devices.mobile}) {\n      width: 8.26875em;\n      height: 2.25em;\n    }\n  }\n`;\n\nexport default ShareHeader;\n","import React, { ReactElement } from 'react';\nimport { NextSeo } from 'next-seo';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\n\nimport ShareHeader from './ShareHeader';\n\ninterface ILayout {\n  head: {\n    title: string;\n    description: string;\n    ogTitle: string;\n    ogDescription: string;\n    ogUrl: string;\n    ogImage: string;\n  };\n  children: ReactElement | ReactElement[];\n}\n\nconst ShareLayout = ({ children, head }: ILayout) => {\n  return (\n    <>\n      <NextSeo\n        title={head.title}\n        description={head.description}\n        openGraph={{\n          title: head.title,\n          description: head.description,\n          url: head.ogUrl,\n          images: [\n            {\n              url: head.ogImage,\n              width: 800,\n              height: 400,\n            },\n          ],\n        }}\n      />\n      <ShareHeader />\n      <main css={container}>{children}</main>\n    </>\n  );\n};\n\nconst container = css`\n  width: 800px;\n  padding-top: 4em;\n  background: ${theme.colors.white};\n\n  .section-divider {\n    width: 100%;\n    height: 1em;\n    background: ${theme.colors.gray200};\n  }\n\n  @media screen and (max-width: ${theme.devices.mobile}) {\n    width: 100%;\n  }\n`;\n\nexport default ShareLayout;\n","import { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport React from 'react';\n\ninterface IDescriptionProps {\n  topic: string;\n  targetAge: string;\n  oneLineDesc: string;\n  isWebNovel?: boolean;\n}\n\nconst Description = ({\n  topic,\n  targetAge,\n  oneLineDesc,\n  isWebNovel,\n}: IDescriptionProps) => {\n  return (\n    <div css={container}>\n      <p className=\"one-line-desc\">{oneLineDesc}</p>\n\n      <span className=\"topic\">{topic}</span>\n      <span className=\"split-point\"> • </span>\n      <span className=\"target-age\">{targetAge}</span>\n    </div>\n  );\n};\n\nconst container = css`\n  padding: 0.75em 0;\n\n  .badge {\n    position: relative;\n    top: -1px;\n\n    display: inline-flex;\n    margin-right: 8px;\n    border-radius: 3px;\n    background-color: ${theme.colors.primary700};\n    padding: 0.1875em 0.375em;\n\n    font-weight: 600;\n    font-size: 11px;\n    line-height: 13px;\n    letter-spacing: -0.3px;\n\n    color: ${theme.colors.white};\n  }\n\n  .topic,\n  .target-age {\n    color: ${theme.colors.primary300};\n    font: ${theme.font.body.caption};\n  }\n\n  .split-point {\n    color: ${theme.colors.primary300};\n    font: ${theme.font.body.caption};\n  }\n\n  .one-line-desc {\n    padding-top: 0.5em;\n    padding-bottom: 0.5rem;\n    color: ${theme.colors.gray500};\n    font: ${theme.font.body2Normal};\n    line-height: 20px;\n    white-space: pre-line;\n  }\n`;\n\nexport default Description;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport { LogotypeColorImg, VariousEnding } from 'public/assets';\n\nconst ShareContent = () => {\n  const { t } = useTranslation();\n  return (\n    <div css={container}>\n      <div className=\"background-gradient\"></div>\n      <section className=\"section-container\">\n        <div className=\"logo-wrapper\">\n          <LogotypeColorImg />\n        </div>\n        <p className=\"title\">\n          {t('share_screen_description_interactive_more_funny_than_novel')}\n        </p>\n        <p className=\"content\">\n          {t('share_screen_description_become_protagonist_of_story')}\n        </p>\n      </section>\n\n      <div className=\"various-background\"></div>\n\n      <section className=\"section-container\">\n        <p className=\"bold-title\">\n          {t('share_screen_description_well_made_interactive_story')}\n        </p>\n\n        <p className=\"content\">\n          <strong>\n            {t('share_screen_description_interactive_more_funny_than_novel')}\n          </strong>\n          {t('share_screen_description_hellobot_and_storyplay')}\n        </p>\n        <VariousEnding className=\"various-ending\" width={500} height={300} />\n      </section>\n    </div>\n  );\n};\n\nconst container = css`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin: 1.25em 0;\n  position: relative;\n  white-space: pre-line;\n\n  .background-gradient {\n    position: absolute;\n    width: 800px;\n    height: 15em;\n    background-image: linear-gradient(\n      to bottom,\n      #f3e8ff,\n      rgba(243, 232, 255, 0)\n    );\n    z-index: 0;\n\n    @media screen and (max-width: ${theme.devices.mobile}) {\n      width: 100%;\n    }\n  }\n\n  .various-background {\n    position: absolute;\n    left: 0;\n    top: 30%;\n    height: 275px;\n    width: 141px;\n    border-top-right-radius: 141px;\n    border-bottom-right-radius: 141px;\n    background-image: linear-gradient(\n      to bottom,\n      rgba(44, 204, 211, 0.15),\n      rgba(44, 204, 211, 0)\n    );\n    z-index: 0;\n  }\n\n  .logo-wrapper {\n    min-height: 30%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-top: 2em;\n  }\n\n  .title {\n    font-size: 22px;\n    font-weight: bold;\n    letter-spacing: -0.8px;\n    color: ${theme.colors.primary500};\n    margin-bottom: 1.25em;\n    text-align: center;\n  }\n\n  .content {\n    font-size: 16px;\n    line-height: 1.5;\n    letter-spacing: -0.4px;\n    color: ${theme.colors.gray600};\n    text-align: center;\n  }\n\n  .bold-title {\n    font-size: 22px;\n    font-weight: bold;\n    letter-spacing: -0.8px;\n    text-align: center;\n    margin-top: 1em;\n  }\n\n  .section-container {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    gap: 1em;\n    margin: 2.25em 0;\n    z-index: 1;\n  }\n\n  .various-ending {\n    margin-top: 1.25em;\n    height: 22em;\n    width: 100%;\n\n    @media screen and (max-width: ${theme.devices.mobile}) {\n      height: 12em;\n    }\n  }\n`;\n\nexport default ShareContent;\n","import React from 'react';\nimport useTranslation from 'next-translate/useTranslation';\nimport { useRouter } from 'next/router';\nimport { css } from '@emotion/react';\nimport theme from '@styles/theme';\nimport SPImage from '@components/commons/image/SPImage';\nimport Description from '@components/storyDetail/summary/StoryDescription';\nimport { ShareStory } from '@customTypes/story';\nimport ShareContent from '../ShareContent';\n\nconst StorySummary = ({\n  title,\n  author,\n  imageUrl,\n  genre,\n  age,\n  summary,\n  storyId,\n}: ShareStory) => {\n  const { t } = useTranslation();\n  const route = useRouter();\n  const showWeb = () => {\n    route.push(`/story/${storyId}`);\n  };\n\n  return (\n    <div css={container}>\n      <div className=\"content\">\n        <div className=\"image-container\">\n          <div className=\"thumbnail\">\n            <SPImage src={imageUrl} alt=\"thumbnail\" layout=\"fill\" priority />\n          </div>\n        </div>\n        <div className=\"title-wrapper\">\n          <div className=\"title-left\">\n            <h1 className=\"title\">{title}</h1>\n            <p className=\"author\">{author}</p>\n          </div>\n        </div>\n        <Description topic={genre} targetAge={age} oneLineDesc={summary} />\n      </div>\n      <ShareContent />\n      <div className=\"bottom-button\">\n        <button className=\"button\" onClick={showWeb}>\n          {t('share_screen_button_move_to_story_now')}\n        </button>\n      </div>\n    </div>\n  );\n};\n\nconst container = css`\n  .content {\n    padding: 1.25em 1.25em;\n  }\n\n  .title-wrapper {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 1.25em 0;\n    border-bottom: 1px solid ${theme.colors.gray300};\n\n    .title-left {\n      display: flex;\n      flex-direction: column;\n\n      .title {\n        font: ${theme.font.title1};\n        color: ${theme.colors.gray900};\n      }\n\n      .author {\n        font: ${theme.font.body2Normal};\n        color: ${theme.colors.gray600};\n        margin-top: 0.75em;\n      }\n    }\n  }\n\n  .image-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n\n    .thumbnail {\n      position: relative;\n      width: 20.9375rem;\n      height: 31.375rem;\n\n      img {\n        image-rendering: auto;\n      }\n    }\n  }\n\n  .bottom-button {\n    margin: 0 auto;\n    padding: 0 1em;\n    position: -webkit-sticky;\n    position: sticky;\n    bottom: 0px;\n    z-index: 2;\n    background-color: ${theme.colors.white};\n    border-top: 1px solid ${theme.colors.gray300};\n  }\n\n  .button {\n    margin: 1em auto;\n    font-size: 1em;\n    font-weight: bold;\n    line-height: 1.5;\n    letter-spacing: -0.4px;\n    text-align: center;\n    width: 100%;\n    height: 3em;\n    border-radius: 0.375em;\n    color: ${theme.colors.white};\n    background-color: ${theme.colors.primary500};\n    cursor: pointer;\n  }\n`;\n\nexport default StorySummary;\n","\n// @ts-ignore\n    import __i18nConfig from '@next-translate-root/i18n'\n// @ts-ignore\n    import __loadNamespaces from 'next-translate/loadNamespaces'\n// @ts-ignore\n    \nimport React from 'react';\nimport { useRouter } from 'next/router';\nimport { addApolloState, initializeApollo } from '@lib/apollo';\nimport { GET_STORY_BY_SHARE_KEY } from '@api/story';\nimport { ShareStory, StoryByShareKey } from '@customTypes/story';\nimport { BASE_URL } from '@common/values';\n\nimport ShareLayout from '@components/share/ShareLayout';\nimport StorySummary from '@components/share/story/StorySummary';\n\ninterface IStoryShare {\n  shareStory: ShareStory;\n}\n\nconst StoryShare = ({ shareStory }: IStoryShare) => {\n  const route = useRouter();\n\n  return (\n    <ShareLayout\n      head={{\n        title: shareStory.title,\n        description: shareStory.summary,\n        ogTitle: shareStory.title,\n        ogDescription: shareStory.summary,\n        ogUrl: `${BASE_URL}/${route.asPath}`,\n        ogImage: shareStory.imageUrl,\n      }}\n    >\n      <StorySummary {...shareStory} />\n    </ShareLayout>\n  );\n};\n\n const _getServerSideProps = async (context: {\n  params: { storyUid: string };\n}) => {\n  const client = initializeApollo();\n\n  try {\n    const res = await client.query<StoryByShareKey>({\n      query: GET_STORY_BY_SHARE_KEY,\n      variables: {\n        id: context.params.storyUid,\n      },\n    });\n\n    const shareStory: ShareStory = {\n      id: context.params.storyUid,\n      title: res.data.getStoryByShareKey.name,\n      author: res.data.getStoryByShareKey.authorName,\n      imageUrl: res.data.getStoryByShareKey.coverImageLink\n        ? res.data.getStoryByShareKey.coverImageLink\n        : 'https://s3.ap-northeast-2.amazonaws.com/storyplay-prod/ImageFile/c1f7f3a5-79cb-45ff-97d8-fe534002bb4d',\n      genre: res.data.getStoryByShareKey.topic,\n      age: res.data.getStoryByShareKey.ageTarget,\n      summary: res.data.getStoryByShareKey.desc,\n      storyId: res.data.getStoryByShareKey.storyId,\n    };\n\n    return addApolloState(client, {\n      props: { shareStory },\n    });\n  } catch (e) {\n    return {\n      notFound: true,\n    };\n  }\n};\n\nexport default StoryShare;\n\n\n// @ts-ignore\n    export async function getServerSideProps(ctx) {\n// @ts-ignore\n        let res = _getServerSideProps(ctx)\n// @ts-ignore\n        if(typeof res.then === 'function') res = await res\n// @ts-ignore\n        return {\n// @ts-ignore\n          \n// @ts-ignore\n          ...res,\n// @ts-ignore\n          props: {\n// @ts-ignore\n            ...(res.props || {}),\n// @ts-ignore\n            ...(await __loadNamespaces({\n// @ts-ignore\n              ...ctx,\n// @ts-ignore\n              pathname: '/share/story/[storyUid]',\n// @ts-ignore\n              loaderName: 'getServerSideProps',\n// @ts-ignore\n              ...__i18nConfig,\n// @ts-ignore\n              loadLocaleFrom: (l, n) => import(`@next-translate-root/locales/${l}/${n}`).then(m => m.default),\n// @ts-ignore\n            }))\n// @ts-ignore\n          }\n// @ts-ignore\n        }\n// @ts-ignore\n    }\n// @ts-ignore\n  ","\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/share/story/[storyUid]\",\n      function () {\n        return require(\"private-next-pages/share/story/[storyUid].tsx\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/share/story/[storyUid]\"])\n      });\n    }\n  "],"names":["container","css","theme","t","useTranslation","router","useRouter","href","className","width","height","onClick","openOldDeepLink","deepLink","OLD_DEEP_LINK","children","head","title","description","openGraph","url","ogUrl","images","ogImage","topic","targetAge","oneLineDesc","isWebNovel","author","imageUrl","genre","age","summary","storyId","route","SPImage","src","alt","layout","priority","push","shareStory","ShareLayout","ogTitle","ogDescription","BASE_URL","asPath","window","__NEXT_P"],"sourceRoot":""}